<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useUserStore } from '../store'
import UserDAL from '../user/userdal'
import message from '../utils/message'
import { modalUserSpace } from '../utils/modal'
export default defineComponent({
  setup() {
    const handleUserChange = (val: boolean, user_id: string) => {
      if (val) UserDAL.UserChange(user_id)
    }
    const handleRefreshUserInfo = () => {
      UserDAL.UserRefreshByUserFace(useUserStore().user_id, false).then((success) => {
        if (success) message.info('刷新用户信息成功')
        else message.error('刷新用户信息失败')
      })
    }

    const handleUserSpace = () => {
      modalUserSpace()
    }

    const handleLogOff = () => {
      UserDAL.UserLogOff(useUserStore().user_id)
    }

    const handleLogin = () => {
      if (window.WebClearCookies) {
        window.WebClearCookies({ origin: 'https://auth.aliyundrive.com', storages: ['cookies', 'localstorage'] })
      }
      useUserStore().userShowLogin = true
    }

    const userList = computed(() => {
      if (userStore.user_id) return UserDAL.GetUserList() 
      else return []
    })
    const userStore = useUserStore()

    return { handleUserChange, handleRefreshUserInfo, handleLogOff, handleLogin, userList, userStore, handleUserSpace }
  }
})
</script>

<template>
  <a-popover position="br" trigger="hover">
    <a-avatar v-if="userStore.userLogined" :size="28" style="margin-right: 12px"><img :src="userStore.GetUserToken.avatar" /></a-avatar>
    <a-avatar v-else :size="28" style="margin-right: 12px" :style="{ backgroundColor: '#3370ff' }">登录</a-avatar>

    <template #content>
      <div v-if="userStore.userLogined" style="width: 250px">
        <a-row justify="center" align="stretch">
          <a-col flex="150px">
            <span class="username">Hi {{ userStore.GetUserToken.nick_name ? userStore.GetUserToken.nick_name : userStore.GetUserToken.user_name }}</span>
          </a-col>
          <a-col flex="auto"></a-col>
          <a-col flex="50px">
            <a-button type="text" size="small" tabindex="-1" style="min-width: 46px; padding: 0 8px" title="刷新账号信息" @click="handleRefreshUserInfo">刷新</a-button>
          </a-col>
          <a-col flex="none">
            <a-button type="text" size="small" tabindex="-1" style="min-width: 46px; padding: 0 8px" title="退出该账号" @click="handleLogOff"> 退出 </a-button>
          </a-col>
        </a-row>

        <a-row justify="center" align="stretch">
          <a-col flex="150px">
            <span class="userspace">{{ userStore.GetUserToken.spaceinfo }}</span>
          </a-col>
          <a-col flex="auto"></a-col>
          <a-col flex="none">
            <a-button type="text" size="small" tabindex="-1" style="min-width: 46px; padding: 0 8px" status="warning" @click="handleUserSpace">容量详情</a-button>
          </a-col>
        </a-row>

        <a-list style="margin: 12px 0 24px 0" :max-height="300" size="small" :data="userList" class="userlist" :data-refresh="userStore.user_id">
          <template #header>
            <div class="userspace">切换到其他账号</div>
          </template>
          <template #item="{ item, index }">
            <a-list-item :key="index">
              <div style="padding-right: 8px" :title="item.spaceinfo">
                <a-progress type="circle" size="mini" status="warning" :percent="item.used_size / item.total_size" />
              </div>
              <span :title="item.user_name" style="max-width:172px;display: :inline-block;">{{ item.nick_name ? item.nick_name : item.user_name }}</span>
              <a-switch size="small" :model-value="userStore.user_id == item.user_id" title="切换到这个账号" tabindex="-1" @change="(val:any) => handleUserChange(val as any,item.user_id)">
                <template #checked> 当前 </template>
                <template #unchecked> 选我 </template>
              </a-switch>
            </a-list-item>
          </template>
        </a-list>

        <a-row justify="center">
          <a-button type="outline" size="small" tabindex="-1" style="margin: 0 0 8px 0" title="Alt+L" @click="handleLogin"> 登录一个新账号 </a-button>
        </a-row>
      </div>
      <div v-else style="width: 250px">
        <a-row align="stretch">
          <a-col flex="60px">
            <a-avatar :size="56"
              ><img
                src=""
            /></a-avatar>
          </a-col>
          <a-col flex="auto">
            <span class="username">Welcome</span>
            <br />
            <span class="userspace">还没登录账号?</span>
          </a-col>
        </a-row>
        <a-divider />
        <a-row justify="center">
          <a-button type="outline" size="small" tabindex="-1" style="margin: 0 0 8px 0" title="Alt+L" @click="handleLogin"> 登录一个新账号 </a-button>
        </a-row>
      </div>
    </template>
  </a-popover>
</template>
<style>
.username {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  font-size: 18px;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
.userspace {
  margin: 0;
  display: inline-block;
  max-width: 170px;
  line-height: 30px;
  overflow: hidden;
  color: #8a9ca5;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: clip;
}
.userlist {
  width: 100%;
}
.userlist .arco-list-header,
.userlist .arco-list-item {
  flex-shrink: 0;
  box-sizing: border-box;
  height: 38px;
  padding: 8px 12px !important;
  line-height: 22px !important;
  overflow: hidden;
}
.userlist .arco-list-item .arco-list-item-content {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.userlist .arco-list-item .arco-list-item-content > span {
  display: inline-block;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
</style>
